<template>
  <div class="home">
    hello world
    <!-- <avatar img-src="../../assets/logo.png" /> -->
    {{ state.userInfo }}
  </div>
</template>
<script>
import {
  ref,
  watch,
  watchEffect,
  nextTick,
  onBeforeMount,
  reactive
  // defineAsyncComponent
} from 'vue'
import { useRoute, useRouter } from 'vue-router'

import {
  useStore
  // mapState,
  // mapMutations,
  // mapActions,
  // mapGetters
} from 'vuex'
export default {
  name: 'Home',
  setup() {
    /**
     * 定义组件defineAsyncComponent & defineComponent
     * 同步组件与异步组件的区别:
     * 同步组件：在组件加载时自动加载；
     * 异步组件：在渲染时加载;
     */
    // const asyncComponent = defineAsyncComponent(() =>
    //   import('./syncComponents.vue')
    // )

    const count = ref(0)
    // watchEffect会自动收集响应式依赖
    watchEffect(() =>
      console.log(`watchEffect会自动收集响应式依赖:${count.value}`)
    )
    // 监听指定基础类型数据
    watch(count, (now, prev) => {
      console.log(now, prev, `watch监听基础类型count:${count}`)
    })

    const userInfo = reactive({
      list: [
        {
          id: '1',
          name: 'pzy'
        }
      ]
    })
    // 监听reactive创建的响应式变量，可以直接监听对象，必须使用内联函数
    watch(
      () => userInfo.list,
      (now, prev) => {
        console.log(now, prev, `watch监听reactive创建对象list:${list}`)
      }
    )

    // 组件内路由
    const router = useRouter()
    router.beforeEach((to, from, next) => {
      console.log(from)
      next()
    })

    // 组件内路由信息
    const route = useRoute()
    console.log('组件内路由信息', route)

    // vuex 存储
    const store = useStore()
    const state = store.state
    console.log(store)
    console.log('vuex存在中state的值')
    console.log(state)

    // 使用nextTick
    onBeforeMount(() => {
      nextTick(() => {
        console.log('onbeforeMount函数中执行nextTick')
      })
    })

    const methods = {
      // 处理commit
      handleMutation: () => {
        store.commit('getUserInfo', new Date())
      },
      // 处理dispatch
      handleAction: () => {
        store.dispatch('asyncGetUserInfo')
      }
    }

    return {
      state,
      ...methods
    }
  }
}
</script>
<style lang="stylus" scoped></style>
